<template>
  <div class="movieDetail">
    <div class="movie-box">
      <div class="movie-img">
        <img :src="detailMovie.imgUrl" alt="">
      </div>
      <div class="movie-desc">
        <div class="movie-desc-top">
          <h1 class="movie-cn-name">{{detailMovie.nm}}</h1>
          <h3 class="movie-en-name">{{detailMovie.enm}}</h3>
          <div class="movie-other-info">
          <div class="movie-type">
            <span class="movie-cat">{{detailMovie.cat}}</span>
          </div>
          <div class="actors line-ellipsis">
            <span>{{detailMovie.star}}</span>
          </div>
          <div class="movie-show-time">
            <span>{{detailMovie.pubDesc}} / {{detailMovie.dur}}分钟</span>
          </div>
          <div class="btn">
            <van-button type="info" size="mini" @click="show = true">剧情简介</van-button>
            <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
            <van-action-sheet v-model="show" title="剧情简介">
              <div class="content">{{detailMovie.dra}}</div>
            </van-action-sheet>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      id: '',
      detailMovie: {},
      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]
    }
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      Toast(item.name)
    }
  },
  created () {
    this.id = this.$route.query.id
    this.$http.getMovieDetail(this.id).then((resp) => {
      console.log(resp)
      const { cat, dra, enm, nm, img, star, dur, pubDesc } = resp.data.detailMovie
      const imgUrl = img.replace('w.h', '148.208')
      this.detailMovie = { cat, dra, enm, nm, imgUrl, star, dur, pubDesc }
    })
  }
}
</script>

<style lang="scss" scoped>
.movieDetail {
  flex: 1;
  background-color: #364027;
  color: #fff;
  .movie-box {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 20px;
    .movie-img {
      float: left;
      height: 125px;
      width: 90px;
      position: relative;
      flex-shrink: 0;
      img {
        height: 125px;
        width: 100%;
      }
    }
    .movie-desc {
      flex-grow: 1;
      margin-left: 10px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      overflow: hidden;
      .movie-desc-top {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        flex-grow: 1;
        .movie-cn-name {
          white-space: nowrap;
          font-size: 18px;
          font-weight: 700;
        }
        .movie-en-name {
          font-size: 14px;
          font-weight: normal;
          opacity: .6;
        }
      }
      .movie-other-info {
        display: flex;
        flex-grow: 1;
        flex-flow: column;
        justify-content: center;
        .movie-type {
          font-size: 12px;
          display: flex;
          align-items: center;
          .movie-cat {
            opacity: .6;
          }
        }
      }
      .actors {
        opacity: .6;
        font-size: 12px;
        margin: 0;
      }
      .movie-show-time {
        span {
          opacity: .6;
          font-size: 12px;
          // margin: 0;
        }
      }
    }
  }
  .content {
    padding: 16px 16px 100px;
    font-size: 18px;
  }
}
</style>
